<template>
  <div class="thirdView" :style="transScale">
    <!-- 头部 -->
    <div class="header">
      <div class="title">
        <span>{{ queryInfo.company}}</span>
        <span class="second">- {{ queryInfo.text }}</span>
      </div>
      <!-- <search-view class="searchView"></search-view> -->
      <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
      <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
      <div class="dateTime">
        <div class="date">{{ date }}</div>
        <div class="time">{{time}}</div>
        <div class="week">{{weekDate}}</div>
      </div>
    </div>
    <!-- 面包屑 -->
    <div class="breadNav">
      <div class="left">
        <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
        <div class="add">当前位置：</div>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
    
        <el-breadcrumb-item :to="{ path: topath }">档案全景</el-breadcrumb-item>
        <el-breadcrumb-item>供应链档案</el-breadcrumb-item>
    
      </el-breadcrumb>
    </div>
    <!-- 主体内容部分 -->
    <div class="main-top">
        <!-- 搜索 -->
      <div class="search">
        <el-form ref="form" :model="sizeForm" inline size="medium">
          <el-form-item>
            <el-input v-model="sizeForm.tradeCo" placeholder="输入企业编码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="sizeForm.fullName" placeholder="输入企业名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList" icon="el-icon-search">查询</el-button>
            <el-button plain @click="clearForm" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="main-top-title">
        <Title name="企业所有供应链情况"></Title>
      </div>
      <div class="relation">
        <div id="relationMap" ref="relationMap" style="width:100%; height: 500px"></div>
      </div>
    </div>
    <div class="main-bottom">
      <div class="main-bottom-title">
        <Title name="企业供应链统计人民币值TOP10"></Title>
      </div>
    
      <!-- 排名 -->
      <div class="main-table">
        <el-table v-loading="loading" :data="supplyChainData" size="mini" style="width: 100%" :cell-style="cellStyle" :header-cell-style="{ color: '#00ffff' }">
          <el-table-column type="index" label="排名" >
          </el-table-column>
          <el-table-column prop="tradeName" label="经营单位" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="agentName" label="报关单位" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="ownerName" label="收货单位" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="jwqyName" label="境外发货人" :show-overflow-tooltip="true">
          </el-table-column>
        <el-table-column prop="rmbPriceTotal" label="人民币值"  :show-overflow-tooltip="true">
        </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Title from './components/title.vue'
import echarts from 'echarts'

import {reqFindSupplyChain}from '@/api/home/index.js'
// import searchView from './components/searchView.vue'
import { encrypt, decrypt } from '@/utils/AES.js'

import { getDate, getTime, getWeekDate } from "@/utils/date.js";
export default {
  components:{
    Title,
    // searchView
  },
  data() {
    return {
      loading:false,
      client: ["1920", "1080"],
      scale_x: 1,
      scale_y: 1,
      relationMapData: {},
      sizeForm:{
        tradeCo: '',
        fullName: '',
      },
      supplyChainData:[
       
      ],
      date: "2021-01-01",
      time: "00:00:00",
      weekDate: "星期一",
      timer: null,
    }
  },
  created() {
    this.getList()
  },
  computed: {
    queryInfo() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      return query
    },
    topath() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      let keyInfo = encrypt(JSON.stringify({
        company: query.company,
        tradeCo: query.tradeCo
      }))
      let code = encodeURIComponent(keyInfo)
      if (!query.company) {
        return '/visual/bigscreen/viewer?reportCode=SecondView'
      } else {

        return `/visual/bigscreen/viewer?reportCode=SecondView&key=${code}`
      }


    },
    transScale() {
      return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow-y: auto;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
    }
  },
  watch: {
    relationMapData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    },
     $route: {
      handler(val) {
        if (val.path == '/visual/thirdView/radarView') {
          // this.ganyuSearch()
          this.getList()
        } else {
          return
        }

      },
      deep: true
    }    
  },
  mounted() {
    this.initClock();
    this.timer = setInterval(() => {
      this.initClock();
    }, 1000);
    window.addEventListener("resize", this.resizeHandler);
    this.resizeHandler();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initClock() {
      this.date = getDate();
      this.time = getTime();
      this.weekDate = getWeekDate();
    },
    cellStyle({ row, column, rowIndex, columnIndex }){
      if(columnIndex==0) {
        
      }else {
        return "color:#fff"
      }
     
    },
    clearForm() {
      this.sizeForm = {
          tradeCo: '',
        fullName: '',
        
      }
      this.getList()
    },
   
    async getList() {
      this.loading=true
       let query = JSON.parse(decrypt(this.$route.query.key))
           if(this.sizeForm.fullName||this.sizeForm.tradeCo) {
             const res=await reqFindSupplyChain(this.sizeForm)
              if(res.code==200){
                  this.relationMapData=res.data
                  this.supplyChainData=res.data.supplyChainVOS
                  
              }
              this.chart.hideLoading();
              this.loading=false
           }else {
              const res=await reqFindSupplyChain({ tradeCo: query.tradeCo })
              if(res.code==200){
                  this.relationMapData=res.data
                  this.supplyChainData=res.data.supplyChainVOS
                  
              }
              this.chart.hideLoading();
              this.loading=false
           }
           
    },
    initChart() {

      this.chart = echarts.init(document.getElementById('relationMap'), null, { renderer: 'svg' });
      // this.setOptions(this.relationMapData);
        this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
   
    },
    
    setOptions(data) {
      var newData = data
      let query = JSON.parse(decrypt(this.$route.query.key))
      var colors = [
      "#D96600",
                "#00B3D9",
                "#D9C400",
                "#604BFF",
               

      ];
      var getdata = function getData() {
        let list = []
         list.push( newData.ownerNameSet )
                list.push(newData.agentNameSet)
                list.push( newData.jwqyNameSet )

        let data = {
          name:query.company,
          value: 0,
          children: [],
        };
        let secondList = ['收货单位', '报关单位', '境外发货人']
        for (let i = 0; i <= list.length - 1; i++) {
          let obj = {
            name: secondList[i],
            value: i,
            children: [],
          };

          for (let j = 0; j <= list[i].length - 1; j++) {
            // console.log(i)
            let obj2 = {
              // name: `行业-${i}-${j}`,
              name: list[i][j].fullName,
              score:list[i][j].score,
              value: i,
            };
            // if (j % 2 == 1) {
            //     obj2.children = [];
            //     for (let k = 1; k <= 3; k++) {
            //         let obj3 = {
            //             name: `行业-${i}-${j}-${k}`,
            //             value: 1 + "-" + i + "-" + j + "-" + k,
            //         };
            //         obj2.children.push(obj3);
            //     }
            // }

            obj.children.push(obj2);
          }

          data.children.push(obj);
        }
        let arr = [];
        arr.push(data);
        //
        arr = handle(arr, 0);
        // 	console.log(arr);
        return arr;
      };

      var handle = function handleData(data, index, color = "#004CFF") {
        //index标识第几层
        return data.map((item, index2) => {

          //计算出颜色
          if (index == 1) {
            color = colors.find((item, eq) => eq == index2 % 10);
          }

          // 让文字换行
          if (item.name) {
            // console.log(item)
            var newParamsName = '';
            var paramsNameNumber = item.name.length;
            var provideNumber = 4; //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = item.name.substring(start, paramsNameNumber);
                } else {
                  tempStr = item.name.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }

            } else {
              newParamsName = item.name;
            }
            item.name = newParamsName
          }
          // 设置节点大小
          if (index === 0 || index === 1) {
            item.label = {
              position: "inside",
              //   rotate: 0,
              //   borderRadius: "50%",
            };
          }
          // 设置label大小
          switch (index) {
            case 0:
              item.symbolSize = 80;
              break;
            case 1:
              item.symbolSize = 70;
              break;
            default:
              item.symbolSize = 50;
              break;
          }
          // 设置线条颜色
          item.lineStyle = { color: color };

          if (item.children) {
            
            //存在子节点
            item.itemStyle = {
              borderColor: color,
              color: color,
            };
            item.children = handle(item.children, index + 1, color);
          } else {
            //不存在
            item.itemStyle = {
              color: color,
              borderColor: color,
            };
          }
          return item;
        });
      };
      const toolTipFormatter =(params)=>{
      
        let htmlStr=''
        // 判断是一级的节点
       if (params.data.symbolSize == 80) {
          htmlStr +=`
             <div style="padding:10px 10px;display:flex;">
              <div style="">
                  <div style="margin-bottom:20px;text-align:center">
                    <span style="font-size:25px;color:#02A7F0;font-weight:700">${newData.rmbPriceTotalAll}</span>  
                    万元
                  </div>
                  <div>所有供应链统计人民币价</div>
              </div>
         
            </div>
          `
          return htmlStr
        }else if(params.data.symbolSize == 50){
          htmlStr+=`
             <div style="padding:10px 10px;display:flex;">
            
              <div style="margin-top:10px">
                 <div style="margin-bottom:20px;text-align:center">
                    <span style="font-size:25px;color:#F59A23;font-weight:700">${params.data.score}</span>  
                    分
                  </div>
                  <div style="text-align:center">企业分值</div>
              </div>
            </div>
          `
          return htmlStr
        }
        else {
          return
        }
        
      }
      this.chart.setOption({
        type: "tree",
        // backgroundColor: "#000",
        toolbox: {
          //工具栏
          show: true,
          iconStyle: {
            borderColor: "#03ceda",
          },
          feature: {
            restore: {},
          },
        },
        tooltip: {
          //提示框
          trigger: "item",
          triggerOn: "mousemove",
          // backgroundColor: "rgba(1,70,86,1)",
          // borderColor: "rgba(0,246,255,1)",
          // borderWidth: 0.5,
          // textStyle: {
          //   fontSize: 10,
          // },
          formatter:(params)=>{
            return toolTipFormatter(params)
          }
        },
        series: [
          {
            type: "tree",
            hoverAnimation: true, //hover样式
            data: getdata(),
            top:'5%',
            bottom: '5%',
            left: 0,
            right: 0,
            layout: "radial",
            symbol: "circle",
            symbolSize: 10,
            nodePadding: 20,
            animationDurationUpdate: 750,
            expandAndCollapse: true, //子树折叠和展开的交互，默认打开
            initialTreeDepth: 2,
            roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
            focusNodeAdjacency: true,
            itemStyle: {
              borderWidth: 1,
            },


            label: {
              //标签样式
              color: "#fff",
              fontSize: 12,
              fontFamily: "SourceHanSansCN",
              position: "inside",
              rotate: 0,

              // formatter: function (val) {
              //     // console.log("label汉字--", val);
              //     // var strs = val.split(''); //字符串数组
              //     // var str = ''
              //     // for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
              //     //     str += s;
              //     //     if (!(i % 4)) str += '\n'; //按需要求余
              //     // }
              //     console.log(val)
              //     return val
              // }

            },
            lineStyle: {
              width: 1,
              curveness: 0.5,
            },
          },
        ],
      })
    },
    resizeHandler() {
      this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
      this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
    },
    
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
     
    }
    window.removeEventListener("resize", this.resizeHandler);
  },
}
</script>

<style lang="scss" scoped>
.thirdView {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
  background-size: 100% 100%;
   ::v-deep .el-loading-mask {
                          background-color: rgba(255, 255, 255, 0);
            
            
                          .el-loading-spinner .circular {
                            width: 30px;
                            height: 30px;
                          }
            
                          .el-loading-spinner .path {
                            stroke: #c23531;
                            stroke-width: 8px;
                          }
                        }
  // padding: 0 20px;
  .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
  
      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
  
        width: 100%;
        height: 70px;
        background-image: url('../../assets/images/bigViewIMG/navbar.png');
        background-size: 100% 100%;
  
        span {
          font-size: 32px;
          color: #00ffff;
          font-weight: 400;
        }
  
        .second {
          margin-left: 5px;
          font-size: 32px;
          color: #00ffff;
          font-weight: 400;
          // font-family: '华文楷体'
        }
      }
  
      .searchView {
        position: absolute;
        top: 22px;
        left: 23px;
      }
  
      .chilun1 {
        width: 138px;
        height: 48px;
        position: absolute;
        top: 22px;
        left: 1252px;
      }
  
      .chilun2 {
        width: 138px;
        height: 48px;
        position: absolute;
        top: 22px;
        left: 506px;
      }
  
      .dateTime {
        position: absolute;
        top: 20px;
        left: 1575px;
        width: 325px;
        height: 36px;
        display: flex;
        color: #fff;
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
  
        .time {
          margin-left: 5px;
        }
  
        .week {
          margin-left: 5px;
        }
      }
    }

  .breadNav {
   height: 40px;
   margin-left: 10px;
    display: flex;
    align-items: center;
  
    .left {
      display: flex;
      align-items: center;
  
      img {
        width: 16px;
        height: 16px;
      }
  
      .add {
        margin-left: 10px;
        margin-right: 10px;
        color: #fff;
        font-size: 16px;
      }
    }
  
    ::v-deep .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          color: #00ffff;
          font-size: 16px;
        }
  
        .is-link {
          color: #fff;
        }
      }
    }
  }
  .main-top {
    // margin-top: 20px;
      width: 100%;
      // height: 800px;
      // border: #005f95 1px solid;
      .search {
        // margin-top: 10px;
        display: flex;
        justify-content: center;
        ::v-deep .el-input .el-input__inner {
            height: 36px;
            line-height: 36px;
          }
        
          ::v-deep .el-button {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 3px;
          }
      }
      .main-top-title {
        padding-left: 10px;
      }
      .relation {
        display: flex;
          justify-content: center;
      }
  }
  .main-bottom {
    margin-top: 10px;
      width: 100%;
      // height: 800px;
      // border: #005f95 1px solid;
      .main-bottom-title {
        padding-left: 10px;
      }
      
      .main-table {
        // width:100%;
        margin: 10px 20px 0 20px; 
        ::v-deep .el-button {
            padding: 6px 8px;
            font-size: 12px;
            border-radius: 6px;
          }
        
          ::v-deep .el-table,
          ::v-deep .el-table__expanded-cell {
            background-color: transparent !important;
        
          }
        
          /* 表格内背景颜色 */
          
          ::v-deep .el-table tr,
          ::v-deep .el-table td {
            background-color: transparent !important;
            border-bottom: none;
          }
                 ::v-deep .el-table th {
                   background-color: #013689 !important;
                   border-bottom: none;
        
                 }
          ::v-deep .el-table td {
            border-bottom: none;
          }
        
          ::v-deep .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
          }
          ::v-deep .el-table {
            .el-table__row {
              .el-table__cell {
                .cell {
                  div {
                    color: #fff;
                    background-color: #0099d5;
                    text-align: center;
                    border-radius: 5px;
                    font-weight: 900;
                    
                  }
                  
                }
                               

              }
              &:nth-child(-n+3) {
                .cell {
                    div {
                     background-color: #ff560e;
                
                    }
                
                  }
              }
            }
          }
      }
  }
}
</style>